<template>
  <!-- 在线监测中部 -->
  <div class="echa">
        <v-chart :auto-resize="true" :options="polar" />
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component({
  components: {},
})
export default class IotCenter extends Vue {
  @Prop({ default:()=>[]})
  xAxisData:Array<string>|undefined;
  @Prop({ default:()=>[]})
  dataList:Array<any>|undefined;
  public polar: Object = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "20%",
      containLabel: true,
    },
    legend: {
      right: "2%",
      top: "2%",
      textStyle: {    
        color: "#fff",
      },
      itemWidth: 14,
      itemHeight: 12,
      // itemGap: 35
    },

    xAxis: {
      type: "category",
      data:["变压器类", "电抗器类", "断路器类", "GIS类", "电容器设备类"],
      axisLine: {
        lineStyle: {
          color: "rgba(115,129,167,0.8)",
        },
      },
      axisLabel: {
        interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      type: "value",
      // name: "单位：个",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {},
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: (this as any).xAxisData[0],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#38F7F2",
              },
              {
                offset: 1,
                color: "#264C9C",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        // data:[400, 500, 500, 500, 500, 400],
      },
      {
        name: (this as any).xAxisData[1],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#FF8E1C",
              },
              {
                offset: 1,
                color: "#8E4B07",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        // data: [400, 600, 700, 700, 200, 400]
      },
      {
        name: (this as any).xAxisData[2],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#004aff",
              },
              {
                offset: 1,
                color: "#0500ff",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        // data: [400, 600, 700, 700, 200, 400]
      },
      {
        name: (this as any).xAxisData[3],
        type: "bar",
        barWidth: "15%",
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00ff2a",
              },
              {
                offset: 1,
                color: "#5dff00",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        // data: [400, 600, 700, 700, 200, 400]
      },
    ],
  };

  
  
  @Watch("dataList", { immediate: true, deep: true })
  getBarData(dataList: any) {
    var jqr: any[]=[]
    var zxjc: any[]=[]
    var fksb: any[]=[]
    var sxt: any[]=[]
    var xAxisData: any[]=[]
    dataList.map((v: any,i: number)=>{ 
      jqr[i]=v.jqr
      fksb[i]=v.fksb
      zxjc[i]=v.zxjc
      sxt[i]=v.sxt
      xAxisData[i]=v.name
    });
      (this as any).polar.series[0].data=jqr;
      (this as any).polar.series[1].data=fksb;
      (this as any).polar.series[2].data=zxjc;
      (this as any).polar.series[3].data=sxt;
      (this as any).polar.xAxis.data=xAxisData;
    
  }
    mounted () {
      // this.init ()
      // console.log(this.xAxisData,'aaaaaaaaaaaaaaaaaaa');
      
  }
}
</script>
<style lang="scss" scoped>
.echa {
  width: 100%;
    height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
